<template>
	<view>
		<view style="display: flex;flex-direction: column;margin: 5px;">
						 <view class="cart-list" v-for="(list,key) in cartList" v-if="cartList.length">
							 <view class="cart-title">
								 <view class="select_icon" style="top: -3px;">
										 <u-icon name="checkmark-circle-fill" @click="checkSpec(list.id)" :color="goodsCheck[list.id]?'red':'#ccc'" size="23"
										  style=""></u-icon>
								 </view>
								 <text class="u-line-1 " style="margin-left: 20px;">{{list.title}}</text>
							 </view>
							<view class="cart-info" v-for="(l,k) in list.spec_info">
								<view class="img-box">
									<image :src="l.img" mode="aspectFill"></image>
									<!-- <view class="select_icon">
										 <u-icon name="checkmark-circle-fill" :color="check[list.id+'-'+k]?'red':'#ccc'"
										  size="23" @click="checkSpec(list.id,k)"
										  style=""></u-icon>
									 </view> -->
								</view>
								
								<view class="right-box">
									<view class="spec_name_box">
										<text class="spec_name">规格：{{l.spec_name}}</text>
										<u-icon name="close" style="margin-right: 5px;" @click="del(list.id,k)"
										:bold="false" color="#afafaf" size="21"></u-icon>
									</view>
									
									<text style="color: #ff557f;">￥{{l.shop_price}}
										<text style="font-size: 12px;color: #999;text-decoration: line-through;font-style: oblique;margin-left: 10px;;" v-if="Number(l.market_price)>Number(l.shop_price)">￥{{l.market_price}}</text>
									</text>
									<u-number-box min="0" :asyncChange="true" 
									v-model="cartList[key].spec_info[k].num"
									 @change="valChange($event,list.goods_id,key,k)"></u-number-box>
								</view>
							</view>
						 </view>
						
						 <view v-if="!cartList.length" style="background-color: #fff;border-radius: 5px;
						 box-shadow: 0 0 5px #ccc;
						 ">
							 <u-empty
							         mode="car"
							         icon="https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/images/car.png"
									 style="margin-bottom: 10px;;"
							 >
							 </u-empty>
						 </view>
						<view>
							<view class="buy-box" :style="tabbar.curPage?'bottom: 50px;':''">
						
							<view class="buy-info">
									<view class="clear-box" :style="'width: '+clearWidth+'px;'" @click="clearCart()">
										<view class="clear-icon-box" @click.stop="check_all()" :style="checkAll?'background-color:red':''">
											<u-icon name="checkmark" size="21" :color="checkAll?'#fff':''"></u-icon>
										</view>
										 <text class="clear-title" v-if="clearWidth>30" style="position: absolute;left: 50px;display: flex;align-items: center;">删除</text>
									</view>
									<view style="display: flex;flex-direction: row;align-items: center;">
										<view style="display: flex;flex-direction: column;margin-right: 10px;;">
											<text style="font-weight: 600;color: #555;">￥{{shop_price}}</text>
											<text style="color: #666;font-size: 12px;">已优惠：<text style="color: #333;font-weight: 600">{{market_price}}</text>元</text>
										</view>
										<text class="jiesuan" @click="createdOrder()">
											去结算
										</text>
									</view>
								</view>
								
							</view>
						</view>
						<u-modal :show="modal.show" 
						@cancel="modal.show = false"
						@confirm="del()"
						 content="确定要删除吗？删除后无法恢复"
						confirmColor="#2979ff"
						 :showCancelButton="true"></u-modal>
		</view>
		<u-modal :show="clear.show"
						@cancel="clear.show = false"
						@confirm="clearCart()"
						 content="此操作会删除所选商品下所有规格"
						confirmColor="#2979ff"
						 :showCancelButton="true"></u-modal>
						 
		</view>

	</view>
</template>

<script>
	export default {
			name:"shopcart",
			data() {
				return {
				clear:{
					show:false
				},
				modal:{
					show:false,
					del:{
						id:"",
						spec_name:""
					}
				},
				clearWidth:30,
				checkAll:false,
				check:{},
				goodsCheck:{},
				cartList:[],
				page:1,
				hasMore:true,
				shop_price:0,//实际价格
				market_price:0,//优惠价格
				};
			},props:{
				 set:{
					type:Object,
				 	default(){
						return {
							type:1,
							app_color:"red"
						}
					}
				 }
			},created() {
				this.get();
				
			},methods:{
createdOrder(){
				let str;
				let param = [];
				for(let k in this.cartList){
					for(let s in this.cartList[k].spec_info){
						str = this.cartList[k].id+'-'+s;
						if(this.check[str]){
							param.push({
								goods_id:this.cartList[k].goods_id,
								spec_name:s,
								num:this.cartList[k].spec_info[s].num
							})
						}
					}
				}
				if(!param.length){
					this.msg("请选择商品");
					return false;
				}
				let self = this;
				this.moxiPost('/plugin/mall/user/order/add',{goods:param},function(data){
					if(data.data){
						self.navto('page_mall/order/created_order?order_id='+data.data);
					}
				})
			},
			clearCart(){
				if(!this.clear.show){
					this.clear.show = true;
				}else{
					let self = this;
					let carts = [];
					for(let k in this.goodsCheck){
						carts.push(k);
					}
					if(!carts.length){
						this.msg('请选择删除的商品');
						return false;
					}
					this.moxiPost("/plugin/mall/user/cart/clear",{carts:carts},function(data){
						self.msg(data.hint);
						self.get();
					})
					this.clear.show = false;
				}
			},
			del(id,k){
				if(id&&!this.modal.show){
					this.modal.id = id;
					this.modal.spec_name = k;
					this.modal.show = true;
				}else{
					this.modal.show = false;
					let self = this;
					this.moxiPost("/plugin/mall/user/cart/del",{id:this.modal.id,spec_name:this.modal.spec_name},function(data){
						self.msg(data.hint);
					})
				}
				
			},
			valChange(e,goods_id,key,k){
				const spec = this.cartList[key].spec_info[k];
				const value = e.value - Number(spec.num);
				let info = {
					num:value,
					goods_id:goods_id,
					spec_name:k
				}
				let self = this;
				this.moxiPost("/plugin/mall/user/cart/created",info,function(data){
					self.cartList[key].spec_info[k].num = e.value;
					self.price()
				})
			},
			price(){
				this.shop_price = 0;
				this.market_price = 0;
				let str,num;
				for(let k in this.cartList){
						for(let s in this.cartList[k].spec_info){
							str = this.cartList[k].id+'-'+s;
							if(this.check[str]){
								num = Number(this.cartList[k].spec_info[s].num);
								this.shop_price = this.shop_price+(Number(this.cartList[k].spec_info[s].shop_price)*num);
								this.market_price = this.market_price+(Number(this.cartList[k].spec_info[s].market_price)*num);
							}
						}
				}
			},
			
			check_all(){
				if(!this.cartList.length){
					this.msg("请先添加购物车");
					return false;
				}
				let str;
				for(let k in this.cartList){
						for(let s in this.cartList[k].spec_info){
							str = this.cartList[k].id+'-'+s;
							if(this.checkAll){
								this.$delete(this.check,str)
							}else{
								this.$set(this.check,str,1)
							}
						}
				}
				this.checkInit();
			},
			checkSpec(cartId,spec_name=false){
				let str;
				if(spec_name){
					 str = cartId+'-'+spec_name
					if(this.check[str]){
						this.$delete(this.check,str)
					}else{
						this.$set(this.check,str,1)
					}
				}else{
					for(let k in this.cartList){
						if(this.cartList[k].id==cartId){
							
							for(let s in this.cartList[k].spec_info){
								str = this.cartList[k].id+'-'+s;
								if(this.goodsCheck[this.cartList[k].id]){
									this.$delete(this.check,str)
								}else{
									this.$set(this.check,str,1)
								}
							}
							break;
						}
					}
				}
				this.checkInit();
			},
			checkInit(){
				let curCheck,str,goodsCheckNum = 0;
				this.checkAll = true;
				for(let k in this.cartList){
					curCheck = true;
					for(let s in this.cartList[k].spec_info){
						str = this.cartList[k].id+'-'+s;
						if(!this.check[str]){
							curCheck = false;
							break
						}
					}
					if(curCheck){
						this.goodsCheck[this.cartList[k].id] = 1;
						goodsCheckNum++;
					}else{
						if(this.goodsCheck[this.cartList[k].id]){
							this.$delete(this.goodsCheck,this.cartList[k].id)
						}
						if(this.checkAll){
							this.checkAll = false;
						}
					}
				}
				if(goodsCheckNum){
					this.clearWidth = 90;
				}else{
					this.clearWidth = 30;
				}
				this.price()
			},
			scrolltolower(){
				this.get()
			},
			get(page=false){
				let self = this;
				this.moxiPost("/plugin/mall/user/cart/get",{},function(data){
					self.cartList = data.data;
				})
			}
			}
			
	}
</script>

<style>
	.cart-list{display: flex;flex-direction: column;padding: 5px;margin-bottom: 15px;background-color: #fff;
		border-radius: 5px;box-shadow: 0 0 5px #ccc;}
		.cart-title{font-size: 14px;color: #333;margin: 5px;position: relative}
		.cart-info{display: flex;flex-direction: row;justify-content: flex-start;border-top: 1px #eee solid;
		margin: 10px 0;padding-top: 10px;}
		.right-box{margin-left: 10px;display: flex;flex-direction: column;justify-content: space-between;flex-grow: 1;}
		.img-box{width: 80px;height: 80px;border-radius: 5px;position: relative;margin-left: 5px;;}
		.img-box image{border-radius: 5px;margin: 5px 0;width: 100%;height: 100%;}
		.spec_name_box{display: flex;flex-direction: row;justify-content: space-between;width: 100%;}
		.spec_name{font-size: 13px;color: #555;margin-top: 5px;}
	
	.select_icon{padding: 2px;background-color: #fff;position: absolute;left: -10px;top: -8px;border-radius: 100px;}
	
	.buy-box{position: fixed;bottom: 0;left: 0;display: flex;flex-direction: row;width: 100%;;}
		.buy-info{
			margin: 10px;height: 55px;
			width: 100%;border-radius: 10px;
			background: rgba(255,255,255,.9);
			box-shadow: 0 0 10px 0 rgba(0,0,0,.5);display: flex;flex-direction: row;
			justify-content: space-between;align-items: center;
		}
		
		.clear-box{margin-left: 10px;height: 30px;background-color: #c5c5c5;transition: all 0.5s;
								border-radius: 100px;display: flex;flex-direction: row;align-items: center;}
	
		.clear-title{padding:0 10px;line-height: 31px;color: #fff;text-align: center;white-space: nowrap;overflow: hidden;}
	
	.clear-icon-box{width: 30px;height: 30px;display: flex;flex-direction: row;;justify-content: center;align-items: center;
									border-radius: 100px;background-color: rgba(255,255,255,0.8)}
	.jiesuan{padding:6px 12px;background-color: #ff557f;box-shadow: 0 0 10px 0 rgba(0,0,0,.5);;
									border-radius: 25px;color: #fff;margin-right: 10px;}
</style>